import React, { Component } from 'react';
import { List, InputItem } from 'antd-mobile';
import { _login, _getcode } from '../../api/request';
import { history } from 'umi';
import { Toast } from 'antd-mobile';
import './code.css';
interface Iprops {
  apps: any;
}
class index extends React.Component<Iprops> {
  els: any;
  pwd: any;
  code: any;
  abs: any;
  async getCode() {
    let res = await _getcode();
    this.abs.innerHTML = res.data.msg.data;
    console.log(res.data.msg.text);
  }
  codes = () => {
    this.getCode();
  };
  componentDidMount() {
    this.getCode();
  }
  handleClick = async () => {
    let res = await _login(
      this.els.state.value,
      this.pwd.state.value,
      this.code.state.value,
    );
    console.log(res);
    if (res.data.code === 0) {
      Toast.success(res.data.msg);
      sessionStorage.setItem('token', res.data.token);
      history.push('/home/onehouse');
    } else {
      Toast.success(res.data.msg);
    }
  };
  render() {
    return (
      <div>
        <List renderHeader={() => '请登录'}>
          <InputItem
            type="text"
            placeholder="请输入账户"
            ref={(el: any) => (this.els = el)}
          >
            账户
          </InputItem>
          <InputItem
            type="password"
            placeholder="请输入密码"
            ref={(el: any) => (this.pwd = el)}
          >
            密码
          </InputItem>
          <div
            onClick={this.codes}
            ref={(el) => (this.abs = el)}
            className="code"
          ></div>
          <InputItem
            type="text"
            placeholder="请输入验证码"
            ref={(el: any) => (this.code = el)}
          >
            验证码
          </InputItem>
          <List.Item>
            <div
              style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
              onClick={this.handleClick}
            >
              登录
            </div>
          </List.Item>
        </List>
      </div>
    );
  }
}
export default index;
